import './index.scss';
import dayjs from 'dayjs';
import {
    Button,
    Col,
    DatePicker,
    Form,
    Input,
    Row,
    Space,
    Table,
    Modal,
} from 'antd';
import { useState } from 'react';
import { useAntdTable } from 'ahooks';
import { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import { qryDeliveryTask } from '@/config/request/opsSearchManager';
import OpsDeliveryTaskDetail from './opsDeliveryTaskDetail';

const OpsMaterial: React.FC = () => {
    const [form] = Form.useForm();
    const formUseModal = useFormModal();
    const [rowItem, setRowItem] = useState<any>();

    const { tableProps, search } = useAntdTable(
        async ({ pageSize, current: pageNum }) => {
            const { publishDate } = form.getFieldsValue();
            const params = {
                ...form.getFieldsValue(),
                startTime: publishDate?.[0]?.format('YYYY-MM-DD 00:00:00'),
                endTime: publishDate?.[1]?.format('YYYY-MM-DD 23:59:59'),
                pageNum,
                pageSize,
                // supplierType
            };
            delete params.publishDate;
            const res = await qryDeliveryTask(params);
            return {
                total: res.data.data?.total ?? 0,
                list: res.data.data?.rows ?? [],
            };
        },
        { defaultPageSize: 10, form }
    );

    const columns: ColumnsType<any> = [
        {
            title: '发货单号',
            dataIndex: 'deliveryTaskCode',
            key: 'deliveryTaskCode',
            width: 5,
        },
        {
            title: '订单号',
            dataIndex: 'platformOrderNo',
            key: 'platformOrderNo',
            width: 5,
        },
        {
            title: '客户经理',
            key: 'nickname',
            dataIndex: 'nickname',
            width: 5,
        },
        {
            title: '仓库',
            dataIndex: 'warehouse',
            key: 'warehouse',
            width: 5,
        },

        {
            title: '发货状态',
            dataIndex: 'deliveryStatus',
            key: 'deliveryStatus',
            width: 5,
        },
        {
            title: '支付状态',
            dataIndex: 'payStatus',
            key: 'payStatus',
            width: 5,
        },
        {
            title: '订单类型',
            dataIndex: 'deliveryType',
            key: 'deliveryType',
            width: 5,
        },
        {
            title: '发货数量',
            key: 'deliveryType',
            dataIndex: 'deliveryType',
            width: 5,
        },
        {
            title: '实际发货数量',
            key: 'realDeliveryNums',
            dataIndex: 'realDeliveryNums',
            width: 5,
        },
        {
            title: '操作',
            fixed: 'right',
            key: 'action',
            width: 10,
            render: (_: any, render: any) => {
                return (
                    <Space size="middle">
                        <Button
                            type="primary"
                            onClick={() => {
                                formUseModal.modal.open();
                                setRowItem(render);
                            }}
                        >
                            详情
                        </Button>
                    </Space>
                );
            },
        },
    ];

    return (
        <div className="bg-white p-2.5">
            <Form form={form} name="supplierList_search">
                <Row>
                    <Col span={4}>
                        <Form.Item label="发货单" name="deliveryTaskCode">
                            <Input placeholder="请输入" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item label="订单编号" name="platformOrderNo">
                            <Input placeholder="请输入" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Form.Item>
                            <Space size="small">
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    onClick={search.submit}
                                >
                                    搜索
                                </Button>
                                <Button type="primary" onClick={search.reset}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
                <Table
                    {...tableProps}
                    bordered
                    columns={columns}
                    pagination={false}
                    // showQuickJumper defaultCurrent={2} total={500} onChange={onChange}
                    rowKey="bugId"
                    locale={{ emptyText: '暂无数据' }}
                    scroll={{ x: 'calc(0vw + 10px)' }}
                />
            </Form>
            <Modal
                width={1200}
                destroyOnClose
                open={formUseModal.isOpen}
                onOk={() => {
                    formUseModal.modal.close();
                }}
                onCancel={() => {
                    formUseModal.modal.close();
                }}
                title="详情"
                className="publishPlanInfoModal"
                okText=""
                cancelText="取消"
                maskClosable={false}
            >
                <OpsDeliveryTaskDetail rowItem={rowItem} />
            </Modal>
        </div>
    );
};

export default OpsMaterial;
